<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{pageTitle}}</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg02.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="goods_box" v-for="(item, index) in system">
					<block>
						<view class="goods" :data-url="'/pages/goods/goods?id='+item.id" @click="gotopage">
							<image :src="item.logo" mode="widthFix"></image>
						</view>
					</block>
				</view>
				
				<view class="clear_box"></view>

				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				pageTitle:'123',
				type:0,
				system:[],
			}
		},
		onLoad(e) {
			let that = this;
			that.pageTitle = e.title;
			that.type = e.type;
			that.loadData();
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._get('index/system_list', {type:that.type}, res => {
					if (res.code == 200) {
						//console.log(res);
						that.system = res.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  // that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
		  //   if (res.code == 200) {
		  //     //console.log(res)
		  //     if (res.data.data == '') {
		  //       uni.showToast({
		  //         title: '已经是最后一页了',
		  //         duration: 2000,
		  //         icon: 'none'
		  //       });
		  //     } else {
		  //       that.info = that.info.concat(res.data.data); //将数据拼接在一起
		  //     }
		  //   } else if (res.code == 0) {
		  //     that.Msg.Success(res.msg, res => {});
		  //   }
		  // });
		},
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #FFF2E2 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.goods_box {
		width: 100%;
		margin-top: 4%;
	}
	
	.goods_box .goods {
		width: 100%;
		margin-bottom: 4%;
	}
	
	.goods_box .goods image {
		width: 100%;
	}
	
	
	
	
</style>
